<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 一、注册组件的基本步骤 -->
    <!-- 1.创建组件构造器：Vue.extend() -->
    <!-- 2.注册组件（全局组件/局部组件）:Vue.component() -->
    <!-- 3.使用组件：在Vue实例的作用范围内使用 -->

    <div id="app">
        <!-- 第三步：使用组件 -->
        <max-cpn></max-cpn>
        <min-cpn></min-cpn>

        <ul>
            <min-cpn></min-cpn>

        </ul>

        <!-- 注意：全局组件和局部组件之间不能嵌套使用 -->
        <!-- <max-cpn>
            <min-cpn></min-cpn>
        </max-cpn> -->


    </div>
    <div id="app2">


    </div>
    <script src="./vue.js"></script>
    <script>
        // 第一步：创建组件构造器
        let myComponent = Vue.extend({
            // 模版
            template: `
            <div>
                <h2>全局组件</h2>
                <p>组件内容。。。。。</p>
            </div>
            `
            // 注意；模版中的html元素只能有一个根元素，因此需要在外面包一个div，不能直接写h2和p元素
        })

        let myComponent2 = Vue.extend({
            // 模版
            template: `
            <div>
                <h2>局部组件</h2>
                <li>组件内容。。。。。</li>
            </div>
            `
            // 注意；模版中的html元素只能有一个根元素，因此需要在外面包一个div，不能直接写h2和p元素
        })

        // 第二步：注册组件
        Vue.component("max-cpn", myComponent); //注册全局组件



        // 注意：实例化对象必须写在注册组件之后，否则会报错
        let app = new Vue({
            el: "#app",
            components: {
                "min-cpn": myComponent2 //注册局部组件
            }
        })

        let app2 = new Vue({
            el: "#app2"
        })
    </script>
</body>

</html>